<template>
    {{ a }}
    <el-form
    ref="ruleFormRef"
    :model="ruleForm"
    :rules="rules"
    label-width="auto"
    class="demo-ruleForm"
    :size="formSize"
    status-icon
  >
  <table>
    <tr>
        <td>
            <el-form-item label="厂牌型号：" prop="vehicleModel">
      <el-input v-model="ruleForm.vehicleModel" placeholder="请输入厂牌型号：" style="width: 240px;"  />
    </el-form-item>
        </td>
        <td>
            <el-form-item label="车牌号：" prop="vehiclelicensePlate">
      <el-input v-model="ruleForm.vehiclelicensePlate" placeholder="请输入车牌号" style="width: 240px;"  />
    </el-form-item>
        </td>
    </tr>
    <tr>
        <td>
            <el-form-item label="司机姓名：" prop="vehicleName">
      <el-input v-model="ruleForm.vehicleName" placeholder="请输入司机姓名" style="width: 240px;"   />
    </el-form-item>
        </td>
        <td>
            <el-form-item label="所属公司：" prop="vehicleFirm">
      <el-input v-model="ruleForm.vehicleFirm" placeholder="请输入所属公司" style="width: 240px;"  />
    </el-form-item>
        </td>
    </tr>
    <tr>
        <td>
            <el-form-item label="车型：" prop="vehicleLong">
      <el-input v-model="ruleForm.vehicleLong" placeholder="长" style="width: 100px;"  /> &nbsp;&nbsp;
      <el-input v-model="ruleForm.vehicleWide" placeholder="宽" style="width: 100px;"   />&nbsp;&nbsp;
      <el-input v-model="ruleForm.vehicleHigh" placeholder="高" style="width: 100px;"   />&nbsp;&nbsp;
    </el-form-item>
        </td>
        <td>
             <el-form-item label="车辆颜色：" prop="vehicleColor">
      <el-input v-model="ruleForm.vehicleColor" placeholder="请输入车辆颜色" style="width: 240px;"  />
    </el-form-item>
        </td>
    </tr>
    <tr>
        <td>
            <el-form-item label="购置日期：" prop="vehiclePurchaseDate">
      <el-col :span="11">
        <el-form-item prop="vehiclePurchaseDate">
          <el-date-picker
            v-model="ruleForm.vehiclePurchaseDate"
            type="date"
            aria-label="Pick a date"
            placeholder="请输入购置日期"
            style="width: 500px"
          />
        </el-form-item>
      </el-col>
    </el-form-item>
        </td>
        <td>
            <el-form-item label="运营证号：" prop="vehicleOperating">
      <el-input v-model="ruleForm.vehicleOperating" placeholder="请输入运营证号" style="width: 240px;"  />
    </el-form-item>
        </td>
    </tr>
    <tr>
        <td>
            <el-form-item label="保险到期日期：" prop="vehicleInsuranceDate">
      <el-col :span="11">
        <el-form-item prop="vehicleInsuranceDate">
          <el-date-picker
            v-model="ruleForm.vehicleInsuranceDate"
            type="date"
            aria-label="Pick a date"
            placeholder="请输入保险到期日期"
            style="width: 500px"
          />
        </el-form-item>
      </el-col>
    </el-form-item>
        </td>
        <td>
            <el-form-item label="年检到期日期：" prop="vehicleAnnualDate">
      <el-col :span="11">
        <el-form-item prop="vehicleAnnualDate">
          <el-date-picker
            v-model="ruleForm.vehicleAnnualDate"
            type="date"
            aria-label="Pick a date"
            placeholder="请输入年检到期日期"
            style="width: 600px"
          />
        </el-form-item>
      </el-col>
    </el-form-item>
        </td>
    </tr>
     <tr>
        <td>
            <el-form-item label="保养公里数设置：" prop="vehicleMaintenance">
      <el-input v-model="ruleForm.vehicleMaintenance" placeholder="请输入保养公里数"  />
    </el-form-item>
        </td>
    </tr>
     <tr>
        <td>
            <el-form-item label="车辆照片：" prop="vehicleCarImg">
      <el-upload
    class="avatar-uploader"
    action="http://10.223.8.2:8000/Foundation/api/Vehicle/VehicleImg"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload"
  >
    <img v-if="ruleForm.vehicleCarImg" :src="'http://10.223.8.2:8000/Foundation/Vehiclepic/'+ruleForm.vehicleCarImg" class="avatar" />
    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
  </el-upload>
    </el-form-item>
        </td>
    </tr>
     <tr>
        <td>
            <el-form-item label="保险卡照片：" prop="ownerDrivinglicenseImg">
      <el-upload
    class="avatar-uploader"
    action="http://10.223.8.2:8000/Foundation/api/Vehicle/VehicleImg"
    :show-file-list="false"
    :on-success="handleAvatarSuccess2"
    :before-upload="beforeAvatarUpload2"
  >
    <img v-if="ruleForm.vehicleImg" :src="'http://10.223.8.2:8000/Foundation/Vehiclepic/'+ruleForm.vehicleImg" class="avatar" />
    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
  </el-upload>
    </el-form-item>
        </td>
    </tr>
  </table>
    
    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">
        提交
      </el-button>
      <el-button @click="resetForm(ruleFormRef)">取消</el-button>
    </el-form-item>
  </el-form>
</template>
<script setup lang="ts">
import { useRoute } from 'vue-router'
const route = useRoute();
const a = route.query.vehicleId
import { useRouter } from 'vue-router'
const router = useRouter();
import { reactive, ref,onMounted } from 'vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import axios from "axios";
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'

import type { UploadProps } from 'element-plus'
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
//生命周期函数钩
onMounted(function () {
    fantian();
})
//添加字段
const ruleForm = reactive({
  vehicleModel: "",
  vehiclelicensePlate: "",
  vehicleName: "",
  vehicleFirm: "",
  vehicleLong: "",
  vehicleWide: "",
    vehicleHigh: "",
    vehicleColor: "",
    vehiclePurchaseDate: "",
    vehicleOperating: "",
    vehicleInsuranceDate: "",
    vehicleAnnualDate: "",
    vehicleMaintenance: "",
    vehicleCarImg: "",
    vehicleImg: "",
    vehicleId: route.query.vehicleId,
  createDate:""
});
//驾驶证图片上传
const handleAvatarSuccess = (img: any) => {
    ruleForm.vehicleCarImg = img;
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/jpg') {
    ElMessage.error('只能是jpeg jpg形式!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 5) {
    ElMessage.error('照片最大不能超过 5MB!')
    return false
  }
  return true
}
//驾驶证图片上传
const handleAvatarSuccess2 = (img: any) => {
    ruleForm.vehicleImg = img;
}

const beforeAvatarUpload2: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/jpg') {
    ElMessage.error('只能是jpeg jpg形式!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 5) {
    ElMessage.error('照片最大不能超过 5MB!')
    return false
  }
  return true
}
//反填方法
const fantian = () => {
    axios.get("FoundationRead/api/Vehicle/FanTianVehicle", {
        params: {
            vehicleId:route.query.vehicleId
        }
    })
        .then(res => {
            ruleForm.vehicleModel = res.data.data.vehicleModel;
            ruleForm.vehiclelicensePlate = res.data.data.vehiclelicensePlate;
            ruleForm.vehicleName = res.data.data.vehicleName;
            ruleForm.vehicleFirm = res.data.data.vehicleFirm;
            ruleForm.vehicleLong = res.data.data.vehicleLong;
            ruleForm.vehicleWide = res.data.data.vehicleWide;
            ruleForm.vehicleHigh = res.data.data.vehicleHigh;
            ruleForm.vehicleColor = res.data.data.vehicleColor;
            ruleForm.vehiclePurchaseDate = res.data.data.vehiclePurchaseDate;
            ruleForm.vehicleOperating = res.data.data.vehicleOperating;
            ruleForm.vehicleInsuranceDate = res.data.data.vehicleInsuranceDate;
            ruleForm.vehicleAnnualDate = res.data.data.vehicleAnnualDate;
            ruleForm.vehicleMaintenance = res.data.data.vehicleMaintenance;
            ruleForm.vehicleCarImg = res.data.data.vehicleCarImg;
            ruleForm.vehicleImg = res.data.data.vehicleImg;
            ruleForm.createDate = res.data.data.createDate;
            console.log(res.data.data)
    })
}
//修改方法
const submitForm = async (formEl: FormInstance | undefined) => {
    
  if (!formEl) return
    await formEl.validate((valid, fields) => {
    console.log(ruleForm)
      if (valid) {
        console.log(ruleForm)
        axios.post("FoundationWrite/api/Vehicle/Handle", ruleForm)
            .then(res => {
                if (res.data.data>0)
                {
                  ElMessage.success("车辆修改成功")
                     router.push("/VehicleShow")
                }
                else
                {
                    ElMessage.error("车辆修改失败")
                    return;
                }
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

</script>
<!-- 图片上传 -->
<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>